<template>
    <div>
        <TableHead
            :config="tableHeaderConfig"
            :searchdata.sync="filters"
            @parentPageList="findPage()"
            :tabinline="true"
            v-show="showSearch"
        ></TableHead>
        <el-card class="card-box">
            <TableToolBar :showSearch.sync="showSearch" @queryTable="findPage" :columns="columns">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd('add')">新增</el-button>
            </TableToolBar>
            <Table
                v-model="pageRequest.pageNum"
                :data="dataList"
                :total="total"
                :columns="columns"
                :loading="loading"
                :showNo="true"
            >
                <template slot="oper" slot-scope="item">
                    <el-button size="small" type="text" icon="el-icon-edit" @click="handleAdd('edit', item.scope.row)">
                        编辑
                    </el-button>
                </template>
            </Table>
            <EditItem
                v-model="dialogVisible"
                :data-form="dataForm"
                :dataFormRules="dataFormRules"
                :dialog-config="dialogConfig"
                :dialog-tag="dialogTag"
                @submitForm="submitForm"
                width="500px"
            ></EditItem>
        </el-card>
    </div>
</template>
<script>
import { fetConfigList, configAddItem, configEditItem } from '@/api/system/config'
import TableToolBar from '@/components/TableToolBar'
import EditItem from '@/components/EditItem'
export default {
    name: 'config',
    components: {
        TableToolBar,
        EditItem
    },
    data() {
        return {
            loading: false,
            showSearch: true,
            pageRequest: { pageNum: 1, pageSize: 10 },
            filters: { operName: '', date: '', title: '', status: '' },
            tableHeaderConfig: [
                { title: '参数名称', code: 'configName', type: 'input' },
                { title: '参数键名', code: 'configKey', type: 'input' },
                {
                    title: '系统内置',
                    code: 'configType',
                    type: 'select',
                    options: [
                        {
                            label: '是',
                            value: '1'
                        },
                        {
                            label: '否',
                            value: '0'
                        }
                    ]
                },
                { title: '日期', code: 'date', type: 'datetimerange' }
            ],

            // 表格的列参配置
            columns: [
                { prop: 'configName', label: '参数名称', visible: true, key: 'configName' },
                { prop: 'configKey', label: '参数键名', visible: true, key: 'configKey' },
                { prop: 'configValue', label: '参数键值', visible: true, key: 'configValue' },
                { prop: 'configType', label: '系统内置', visible: true, key: 'configType' },
                { prop: 'remark', label: '描述', visible: true, key: 'remark' },
                { type: 'createUser', label: '创建人/创建时间', minWidth: 120, visible: true, key: 'createUser' },
                { type: 'updateUser', label: '更新人/更新时间', minWidth: 100, visible: true, key: 'updateUser' },
                { slot: 'oper', label: '操作', visible: true, key: 'oper', align: 'center' }
            ],
            dataList: [],
            total: 0,
            //  入参
            dataFormDefault: { configType: 1, configName: '', configValue: '', configKey: '', remark: '' },
            dataForm: {},
            dialogTag: 'add',
            dataFormRules: {
                configName: [
                    {
                        required: true,
                        message: '请输入参数名称',
                        trigger: 'blur'
                    }
                ],
                configKey: [
                    {
                        required: true,
                        message: '请输入参数键名',
                        trigger: 'blur'
                    }
                ]
            },
            dialogVisible: false,
            dialogConfig: [
                { title: '参数名称', code: 'configName', type: 'input' },
                { title: '参数键名', code: 'configKey', type: 'input' },
                { title: '参数键值', code: 'configValue', type: 'input' },
                { title: '系统内置', code: 'configType', type: 'radio' },
                { title: '描述', code: 'remark', type: 'textarea' }
            ]
        }
    },
    methods: {
        findPage() {
            const params = Object.assign({}, this.pageRequest, this.filters,{
                beginTime:this.filters.startTime
            })
            console.log('params', params)
            fetConfigList(params).then((res) => {
                console.log(res)
                this.total = res.data.total
                this.dataList = res.data.items
            })
        },
        handleAdd(type, row = {}) {
            console.log('555')
            this.dialogTag = type
            this.dialogVisible = true
            if (type == 'add') {
                this.dataForm = Object.assign({}, this.dataFormDefault)
            } else {
                this.dataForm = Object.assign({}, row)
            }
        },
        submitForm(params) {
            const fetchApi = this.dialogTag == 'add' ? configAddItem : configEditItem
            fetchApi(params).then((res) => {
                this.findPage()
                this.dialogVisible = false
            })
        }
    },
    mounted() {
        this.findPage()
    }
}
</script>
